<template>
  <el-dialog
    :title="$t('product.relateProduct')"
    :visible.sync="visible"
    width='500px'
    class="associate-dialog"
  >
    <el-form label-position="top" :model="form" ref="form" :rules="rules" >
      <el-form-item :label="`${$t('product.relateProduct')}：`" required prop="productId">
        <el-col :span="24">
          <qrcode-select-product ref="selProduct" @input="selectProduct"></qrcode-select-product>
        </el-col>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('common.base.close') }}</el-button>
      <el-button type="primary" @click="submit('form')" :disabled='pending'>{{$t('common.base.contact2')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as producqQrcode from '@src/api/productQrcode';
import SelectProduct from './SelectProduct';

export default {
  name:'associate-dialog',
  data(){
    return {
      visible:false,
      pending:false,
      form:{
        productId:''
      },
      rules:{
        productId:[
          {required:true,message: this.$t('product.tips.selectProductTip'),trigger:'blur'}
        ]
      }
    }
  },
  props:{
    qrcodeId:{
      type:String,
      default:''
    }
  },
  methods:{
    open(){
      this.visible=true;
      this.$nextTick(()=>{
        this.$refs.selProduct.clear();
      })
    },
    selectProduct(val){
      this.form.productId=val[0]?val[0].value:'';
    },
    submit(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          this.pending=true;
          const params={
            qrcodeId:this.qrcodeId,
            productId:this.form.productId
          }
          producqQrcode.bindQrCode(params).then(res=>{
            const {status,message}=res;
            this.$message({
              type:status===0?'success':'error',
              message
            });
            if(status===0){
              this.visible=false;
              this.$emit('success');
            }
            this.pending=false;
          })
        }
      })
    }
  },
  components:{
    [SelectProduct.name]:SelectProduct
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header{
  background-color: $bg-color-l2;
  padding-top: 10px;

  .el-dialog__headerbtn{
    top: 0;
  }
}
.associate-dialog{
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: #262626;
    }
  }
  ::v-deep .el-dialog__body{
    padding: 10px 20px;
  }
}
::v-deep .el-dialog__footer{
  border-top: 1px solid $color-border-l2;
  padding-bottom: 10px;
}
</style>